<template>
	<view>
		<view class="a">
			<view class="al">
				<image src="/static/dingdan_imgs/tupian.png" mode="" style="height: 80rpx; width: 80rpx;"></image>
			</view>
			<view class="am">
				商品评分
			</view>
			<view class="ar">
				<van-rate value="valu" bind:change="onChang" />
			</view>
		</view>

		<view class="b">
			<view class="bu">
				<input class="uni-input" focus placeholder="快来说说您对本产品的想法吧～" />
			</view>

			<view class="bd">
				<van-uploader file-list="fileList" max-count="2" bind:after-read="afterRead" />
			</view>
		</view>
		<view class="c">
			<view class="cl">
				配送评分
			</view>
			<view class="ar">
				<van-rate value="value" bind:change="onChange" />
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				valu: 3,
				value: 3,
			}
		},
		methods: {
			onChang(event) {
				this.setData({
					valu: event.detail,
				});
			},
			onChange(event) {
				this.setData({
					value: event.detail,
				});
			},
			afterRead(event) {
				const {
					file
				} = event.detail;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				wx.uploadFile({
					url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success(res) {
						// 上传完成需要更新 fileList
						const {
							fileList = []
						} = this.data;
						fileList.push({
							...file,
							url: res.data
						});
						this.setData({
							fileList
						});
					},
				});
			},
		}
	}
</script>

<style>
	.a {
		border-bottom: 2rpx gainsboro solid;
		height: 120rpx;
		position: relative;
	}

	.al {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
	}

	.am {
		position: absolute;
		left: 120rpx;
		top: 40rpx;
		font-size: 30rpx;
	}

	.ar {
		position: absolute;
		right: 50rpx;
		top: 35rpx;
	}

	.b {
		border-bottom: 2rpx gainsboro solid;
		height: 400rpx;
		position: relative;
	}

	.bu {
		font-size: 30rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.bd {
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
	}

	.c {
		border-bottom: 2rpx gainsboro solid;
		height: 120rpx;
		position: relative;
	}

	.cl {
		position: absolute;
		left: 20rpx;
		top: 40rpx;
		font-size: 30rpx;
	}
	
</style>
